<template>
  <div>
    <h1>App组件</h1>
    <!-- 演示: 清除Test组件的自定义事件xxx -->
    <!-- <button @click="$refs.t.$off('xxx')">清除Test组件的自定义事件</button> -->
    <hr />
    <!-- 如果在组件实例上写了ref属性,则当组件实例创建成功之后,vue会自动将组件实例添加到this.$refs.t这个属性上面 -->
    <Test ref="t"></Test>
  </div>
</template>

<script>
import Test from './Test.vue'
export default {
  components: {
    Test,
  },
  methods: {
    handle(...args) {
      console.log('handle', args)
    },
  },
  mounted() {
    // 当App组件挂载成功,说明Test组件一定也挂载成功了,说明Test组件的实例创建完毕了.所以在这里给Test组件绑定自定义事件
    // this.$refs.t.$on('事件名',事件处理函数)
    this.$refs.t.$on('xxx', this.handle)
  },
}
</script>

<style></style>
